<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  labelFlex="80px"
  (onSearch)="queryResetData($event)"
  (onReset)="queryResetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-4">
  <div nz-row nzJustify="space-between" nzAlign="bottom">
    <div nz-col class="opera-lf">
      <button
        nz-button
        nzType="primary"
        class="m-r-8"
        disabled
        (click)="showEditDeliveryModal()"
      >指定配送方式</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:czOpera')"
        nz-button
        nzType="primary"
        class="mbtn-green m-r-8"
        disabled
        (click)="batchPackOver()"
      >打包完成</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:czOpera')"
        nz-button
        nzType="primary"
        class="mbtn-green m-r-8"
        disabled
        (click)="batchConfirmCk()"
      >确认出库</button>

      <button
        nz-button
        nzType="primary"
        class="mbtn-orange m-r-8"
        [nzLoading]="exportPickLoading"
        (click)="exportPickData()"
      >导出拣货信息</button>

      <button
        nz-button
        nzType="primary"
        class="mbtn-orange m-r-8"
      >打印快递面单</button>

      <button
        nz-button
        nzType="primary"
        class="mbtn-orange"
        (click)="noticeTakeParts()"
      >通知快递取件</button>
    </div>
  </div>

  <div class="pagination-wrap-position p-t-10">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzWidth="50px"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="center" nzWidth="200px" nzLeft>出库单号</th>
          <th nzAlign="center" nzWidth="120px">出库类型</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="150px">配送方式</th>
          <th nzAlign="center" nzWidth="150px">物流信息</th>
          <th nzAlign="center" nzWidth="150px">要求出库</th>
          <th nzAlign="center" nzWidth="150px">实际出库</th>
          <th nzAlign="center" nzWidth="120px">出库仓库</th>
          <th nzAlign="center" nzWidth="120px">出库品质</th>
          <th nzAlign="center" nzWidth="170px">出库完毕时间</th>
          <th nzAlign="center" nzWidth="220px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <td
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event)"
          ></td>
          <!-- 出库单号 -->
          <td nzAlign="center" nzLeft>
            <ng-container *ngIf="data.deliveryNumber; else elseTemplate">
              <a
                style="color: #409EFF;"
                routerLink="/storage-center/storage-exwarehous-handle"
                [queryParams]="{id: data.id}"
              >
                {{ data.deliveryNumber || '-' }}
              </a>
            </ng-container>
            <ng-template #elseTemplate>
              -
            </ng-template>
          </td>
          <!-- 出库类型 -->
          <td nzAlign="center">
            <span>
              {{ filterText(outTypeOptions, data.type, 'content') }}
            </span>
          </td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.state | storeOutStatus: 'color'}">
              {{ data.state | storeOutStatus: 'label' }}
            </span>
          </td>
          <!-- 配送方式 -->
          <td nzAlign="center">
            <span>
              {{ data.deliveryMethod | storageDeliveryMethod: 'label' }}
            </span>
          </td>
          <!-- 物流信息 -->
          <td nzAlign="center">
            <p *ngIf="data.expressName">{{ data.expressName }}</p>
            <p>{{ data.expressNo || '-' }}</p>
          </td>
          <!-- 要求出库 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.deliveryContent !== data.actualDeliveryContent ? '#FF9900' : ''}">
              {{ data.deliveryContent || '-' }}
            </span>
          </td>
          <!-- 实际出库 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.deliveryContent !== data.actualDeliveryContent ? '#FF9900' : ''}">
              {{ data.actualDeliveryContent || '-' }}
            </span>
          </td>
          <!-- 出库仓库 -->
          <td nzAlign="center">
            {{ filterText(warehouseOptions, data.whId, 'id') }}
          </td>
          <!-- 出库品质 -->
          <td nzAlign="center">
            <span>
              {{ data.quality === 0 ? '不良品' : (data.quality === 1 ? '良品' : '-') }}
            </span>
          </td>
          <!-- 出库完毕时间 -->
          <td nzAlign="center">{{ data.deliveryTime || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              routerLink="/storage-center/storage-exwarehous-handle"
              [queryParams]="{id: data.id}"
            >查看</button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showFollowModal(data)"
            >跟进</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 跟进Component -->
<app-follow-up
  #followUpRef
  [initParams]="initParams"
  [ohterParams]="{ type: 0, sourceType: 99 }"
></app-follow-up>
<!-- E 跟进Component -->

<!-- S 修改配送方式 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isDeliveryVisible"
  [nzTitle]="'修改配送方式'"
  (nzOnCancel)="isDeliveryVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateDeliveryForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>运费承担</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择运费承担!">
            <nz-radio-group formControlName="isFreight">
              <label nz-radio [nzValue]="0">我方承担</label>
              <label nz-radio [nzValue]="1">用户承担</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>配送方式</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择配送方式!">
            <nz-radio-group
              class="radio-psfs-wrap"
              formControlName="deliveryMethod"
              (ngModelChange)="deliveryChange($event)">
              <label
                *ngFor="let option of deliveryOptions"
                nz-radio
                [nzDisabled]="setOfCheckedId.size > 1 && option.value === 2"
                [nzValue]="option.value"
              >{{ option.label }}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label
            [nzSpan]="5"
            [nzRequired]="[1, 2].includes(validateDeliveryForm.value.deliveryMethod)">
            物流公司
          </nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择物流公司!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择物流公司"
              [nzDisabled]="[3].includes(validateDeliveryForm.value.deliveryMethod)"
              formControlName="expressCode">
              <nz-option
                *ngFor="let option of logisticsOptions"
                [nzDisabled]="!['JD', 'SF'].includes(option.content) && validateDeliveryForm.value.deliveryMethod == 1"
                [nzLabel]="option.name"
                [nzValue]="option.content"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label
            [nzSpan]="5"
            [nzRequired]="[2].includes(validateDeliveryForm.value.deliveryMethod)">
            物流单号
          </nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入物流单号!">
            <input
              nz-input
              placeholder="请输入物流单号"
              formControlName="expressNo"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5">运费</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入运费!">
            <nz-input-number
              style="width: 50%;"
              [nzMin]="0"
              [nzMax]="99999"
              [nzStep]="1"
              [nzDisabled]="[1].includes(validateDeliveryForm.value.deliveryMethod)"
              nzPlaceHolder="请输入运费"
              formControlName="expressPrice"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5">发货备注</nz-form-label>
          <nz-form-control [nzSpan]="19">
            <nz-textarea-count [nzMaxCharacterCount]="200">
              <textarea
                rows="4"
                nz-input
                maxlength="200"
                placeholder="请输入发货备注"
                formControlName="deliverRemark"
              ></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isDeliveryVisible = false">取消</button>
        <button nz-button nzType="primary" (click)="subEditDeliveryData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 修改配送方式 Modal -->